<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wjn
 * @LastEditTime: 2022-01-07 15:41:56
-->
<template>
  <!--1. 容器 -->
  <div ref="left1_container" id="container" style="height: 95%"></div>
</template>

<script>
//2.引入折线图构造函数
import {Line} from '@antv/g2plot'
import {get} from '../../../utils/request'
import moment from 'moment'

export default {
    data() {
      return {
        dataArr:[]
      }
    },
    created() { //钩子函数

    },
    mounted() {
      //5.调用
      this.initData()
    },
    methods:{
      initData() {
        get('/dashboard/pageQueryTodayData',{
          page:1,
          pageSize:5,
          device_id:1
        }).then(res  =>{
          res.data.list.forEach(item =>{
            item.dateTime = moment(item.insert_time).format('HH:mm')
          });
          this.dataArr = res.data.list
          console.log(4444,this.dataArr);
          this.initChart()
        })
      },
      initChart() {
        //3.创建一个折线图实例对象
        //id = "container"
        //const line = new Line('container', {
        //ref='left1_container'
        const line = new Line(this.$refs.left1_container, {
          data:this.dataArr,
          xField: 'dateTime',
          yField: 'temperature'
        });
        //4.渲染图像
        line.render();
      }
    }
}
</script>

<style scoped>

</style>